<template>
  <div class="enroll-info-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="微信信息:" prop="wxKeyword">
        <el-input
          style="width: 100%"
          v-model="queryParams.wxKeyword"
          placeholder="请输入微信昵称或ID"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="报名信息:" prop="enrollKeyword">
        <el-input
          style="width: 100%"
          v-model="queryParams.enrollKeyword"
          placeholder="请输入报名信息"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="商品名称:" prop="goodsName">
        <el-input
          style="width: 100%"
          v-model="queryParams.goodsName"
          placeholder="请输入商品名称"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="团内身份:" prop="identity">
        <el-select v-model="queryParams.identity" placeholder="请选择" clearable @change="handleQuery">
          <el-option
            v-for="dict in dict.type.team_identity"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户身份:" prop="optionalIdentity">
        <el-select style="width: 100%" v-model="queryParams.optionalIdentity" placeholder="请选择状态" clearable @change="handleQuery">
          <el-option key="0" label="老生(仅可开团)" value="old_member"/>
          <el-option key="1" label="新生(可开团/参团)" value="new_member"/>
        </el-select>
      </el-form-item>
      <el-form-item label="参团时间:" v-if="showWay">
        <el-date-picker
          v-model="queryParams.attendDateRange"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleQuery"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="团状态:" prop="groupStatus">
        <el-select v-model="queryParams.groupStatus" placeholder="请选择" clearable @change="handleQuery">
          <el-option
            v-for="dict in dict.type.team_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态:" prop="status" v-if="!showWay">
        <el-select v-model="queryParams.status" placeholder="请选择" clearable @change="handleQuery">
          <el-option
            v-for="dict in dict.type.order_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报名费用:" prop="settlementStatus" v-if="!showWay">
        <el-select v-model="queryParams.settlementStatus" placeholder="请选择" clearable @change="handleQuery">
          <el-option key="1" label="待结算" :value="1"/>
          <el-option key="2" label="已结算" :value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="报名时间:" v-if="!showWay">
        <el-date-picker
          v-model="queryParams.enrollDateRange"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleQuery"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="邀请人:" prop="awardMemberKey" v-if="!showWay">
        <el-input
          style="width: 300px"
          v-model="queryParams.awardMemberKey"
          placeholder="请输入邀请人昵称、手机号或ID"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <template v-for="(item, index) in collectRule">
        <!--输入框-->
        <el-form-item v-if="item.type === 'input' && index > 1" :label="item.label + ':'" :key="index">
          <el-input v-model="queryParams.enrollOther[index]" :placeholder="'请输入' + item.label" @keyup.enter.native="handleQuery">
            <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
          </el-input>
        </el-form-item>
        <!--单选-->
        <el-form-item v-if="(item.type === 'radio' || item.type === 'select') && index > 1" :label="item.label + ':'" :key="index">
          <el-select style="width: 100%" :placeholder="'请选择' + item.label" clearable v-model="queryParams.enrollOther[index]" @change="handleQuery">
            <el-option
              v-for="item in item.options"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <div class="show-base">
        <div class="show-way" :class="{showWayBg: showWay}">
          <span class="show-way-title">按团信息展示：</span>
          <el-switch @change="switchShowWay" v-model="showWay"></el-switch>
        </div>
        <div class="team-sta" v-for="(item, index) in teamStaData" :key="index" v-if="showWay">
          <el-badge :value="item.personnel_number_count" class="item team-sta-item">
            <el-button size="small" @click="setPersonnelNumberCount(item.personnel_number)">{{ item.personnel_number }}人团</el-button>
          </el-badge>
        </div>
        <div class="refund-btn">
          <span v-if="batchVirtualOpen && showWay" style="padding-right: 10px; font-size: 14px; color: #575555">已选中 {{ confirmAdjustForm.ids.length }} 团</span>
          <el-button plain :disabled="confirmAdjustForm.ids.length <= 0" size="small" @click="confirmAdjust" v-if="batchVirtualOpen && showWay" key="virtual">确认调整虚拟团员</el-button>
          <el-button plain size="small" @click="cancelBatchVirtual" v-if="batchVirtualOpen && showWay">取消</el-button>

          <el-button plain size="small" @click="batchVirtualOpen = true" v-if="!batchVirtualOpen && showWay">批量调整虚拟团员</el-button>
          <el-button plain size="small" @click="batchRefund" v-if="!batchVirtualOpen" v-hasPermi="['system:order:refundAll']">批量退款</el-button>
          <el-button plain size="small" @click="customRow" v-if="!batchVirtualOpen">自定义列表信息</el-button>
          <el-button
            v-if="!batchVirtualOpen"
            plain
            icon="el-icon-download"
            size="small"
            @click="handleExport"
          >导出</el-button>
        </div>
      </div>
    </el-row>
    <el-table :data="dataList" v-if="!showWay" @selection-change="handleSelectionChange">
      <el-table-column type="selection" min-width="50" align="center" />
      <el-table-column label="序号" type="index">
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="微信信息" key="avatarUrl" min-width="180" v-if="columns[0].visible">
        <template slot-scope="scope">
          <div class="info-box">
            <div class="img-box">
              <img :src="scope.row.avatarUrl" alt=""/>
            </div>
            <div class="content-box">
              <div>
                {{ scope.row.nickname }}
              </div>
              <div>
                ID:{{ idDesensit(scope.row.wxId) }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="报名信息" key="enrollName" min-width="110" v-if="columns[1].visible">
        <template slot-scope="scope">
          <div>{{ scope.row.enrollName }}</div>
          <div>{{ scope.row.enrollMobile }}</div>
        </template>
      </el-table-column>
      <template v-for="(item,index) in collectRule" v-if="columns[2].visible">
        <el-table-column v-if="index > 1" :label="item.label" :key="item.label" min-width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.enrollOther[index] }}</span>
          </template>
        </el-table-column>
      </template>
      <el-table-column label="邀请人" min-width="110" v-if="columns[3].visible">
        <template slot-scope="scope">
          <div>
            <div>{{ scope.row.inviteNickname }}</div>
            <div>{{ scope.row.inviteMobile }}</div>
            <div>ID:{{ idDesensit(scope.row.inviteWxId) }}</div>
            <div></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="邀请员工" prop="realname" min-width="100" v-if="columns[4].visible"/>
      <el-table-column label="团内身份" min-width="100" v-if="columns[5].visible">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.team_identity" :value="scope.row.identity"/>
        </template>
      </el-table-column>
      <el-table-column label="团人数" min-width="100" v-if="columns[6].visible">
        <template slot-scope="scope">
          {{ scope.row.personnelNumber }}人
        </template>
      </el-table-column>
      <el-table-column label="所属团" min-width="100" v-if="columns[7].visible">
        <template slot-scope="scope">
          {{ scope.row.teamName }}的团
        </template>
      </el-table-column>
      <el-table-column label="客户身份" min-width="100" v-if="columns[8].visible">
        <template slot-scope="scope">
          <span v-if="scope.row.optionalIdentity">
            {{ scope.row.optionalIdentity === 'new_member' ? '新生（可开团/参团）': scope.row.optionalIdentity === 'old_member'? '老生（仅可开团）' : '-' }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="报名商品" prop="welfareName" min-width="150" v-if="columns[9].visible"/>
      <el-table-column label="支付金额（元）" min-width="100" v-if="columns[10].visible">
        <template slot-scope="scope">
          {{ scope.row.realityPayAmount }}元
        </template>
      </el-table-column>
      <el-table-column label="实收金额（元）" min-width="100" v-if="columns[11].visible">
        <template slot-scope="scope">
          {{ scope.row.actualAmount }}元
        </template>
      </el-table-column>
      <el-table-column label="报名时间" min-width="100" v-if="columns[12].visible">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="团状态" min-width="100" v-if="columns[13].visible">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.team_status" :value="scope.row.groupPurchaseStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" min-width="100" v-if="columns[14].visible">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.order_type" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="报名费用" min-width="100" v-if="columns[15].visible">
        <template slot-scope="scope">
          <span>
            {{ scope.row.settlementStatus == 2 ? '已结算' : '待结算' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column v-if="!showWay" label="操作" class-name="small-padding fixed-width" fixed="right" min-width="150">
        <template slot-scope="scope">
          <router-link :to="'/order/detail/index/' + scope.row.id" class="link-type">
            <el-button size="small" type="text">核销</el-button>
          </router-link>
          <span class="but-interval">|</span>
          <router-link :to="'/order/detail/index/' + scope.row.id" class="link-type">
            <el-button size="small" type="text">详情</el-button>
          </router-link>
          <span class="but-interval">|</span>
          <el-dropdown @command="(command) => handleCommand(command, scope.row)">
            <el-button type="text" size="small">更多</el-button>
            <el-dropdown-menu slot="dropdown">
<!--              <el-dropdown-item command="memberSource" align="center">客户来源</el-dropdown-item>-->
              <el-dropdown-item command="publicize" align="center">推广</el-dropdown-item>
              <el-dropdown-item command="editEnroll" align="center">修改报名信息</el-dropdown-item>
              <el-dropdown-item command="upgrade" v-if="scope.row.identity == 2" align="center">升为团长</el-dropdown-item>
              <el-dropdown-item command="reduce" v-if="scope.row.identity == 1" align="center">降为团员</el-dropdown-item>
              <el-dropdown-item command="isolate" align="center">独立成团</el-dropdown-item>
              <el-dropdown-item command="remove" align="center">移团</el-dropdown-item>
              <el-dropdown-item command="refund" align="center" v-hasPermi="['system:order:refund']">退款</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column v-if="showWay" label="操作" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <router-link :to="'/order/detail/index/' + scope.row.id" class="link-type">
            <el-button size="small" type="text">详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-if="showWay && !batchVirtualOpen"
      :data="dataList">
      <el-table-column label="序号" type="index" key="index">
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="团名称" key="teamName">
        <template slot-scope="scope">
          {{ scope.row.teamName }}的团
        </template>
      </el-table-column>
      <el-table-column label="报名商品" prop="welfareName" key="welfareName"/>
      <el-table-column label="邀请员工" prop="realname" key="realname"/>
      <el-table-column label="团人数" key="personnelNumber">
        <template slot-scope="scope">
          {{ scope.row.personnelNumber }}(虚拟{{ scope.row.virtualPersonnelNumber }}人)
        </template>
      </el-table-column>
      <el-table-column label="团状态" key="groupPurchaseStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.team_status" :value="scope.row.groupPurchaseStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="微信信息" key="wxinfo" width="300">
        <template slot-scope="scope">
          <div v-for="(item,index) of scope.row.itemList">
            <div class="info-box table-gap" :key="index">
              <div class="img-box">
                <img :src="item.avatarUrl" alt=""/>
              </div>
              <div class="content-box">
                <div>
                  {{ item.nickname }}
                </div>
                <div>
                  ID:{{ idDesensit(item.wxId) }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="报名信息" key="registerInfo" width="150">
        <template slot-scope="scope">
          <div v-for="(item,index) of scope.row.itemList">
            <div class="table-gap" :key="index">
              <div>{{ item.registerName }}</div>
              <div>{{ item.registerMobile }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="团内身份" key="identity" width="100">
        <template slot-scope="scope">
          <div v-for="(item,index) of scope.row.itemList">
            <div class="table-gap" :key="index">
              <dict-tag :options="dict.type.team_identity" :value="item.identity"/>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="参团时间" key="createTime" width="170">
        <template slot-scope="scope" >
          <div v-for="(item,index) of scope.row.itemList">
            <div class="table-gap" :key="index">
              {{ parseTime(item.createTime) }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column key="操作" label="操作" class-name="small-padding fixed-width" fixed="right" min-width="220">
        <template slot-scope="scope" >
          <div v-for="(item,index) of scope.row.itemList">
            <div class="table-gap" :key="index">
              <el-button type="text" v-if="item.identity == 1" @click="goVirtual(item)">调整虚拟成员</el-button>
              <el-button type="text" v-if="item.identity == 1" @click="goReduce(item)">降为团员</el-button>
              <el-button type="text" v-if="item.identity == 2" @click="goUpgrade(item)">升为团长</el-button>
              <el-button type="text" @click="goIsolate(item)">独立成团</el-button>
              <el-button type="text" @click="goRemoveTeam(item)">移团</el-button>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      ref="multipleTable"
      v-if="showWay && batchVirtualOpen"
      :data="dataList"
      @select="handleSelection"
      @select-all="handleAllChange"
      :row-key="getRowKeys"
    >
      <el-table-column type="selection" :reserve-selection="true" width="50"/>
      <el-table-column label="序号" type="index" key="index">
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="团名称" key="teamName">
        <template slot-scope="scope">
          {{ scope.row.teamName }}的团
        </template>
      </el-table-column>
      <el-table-column label="报名商品" prop="welfareName" key="welfareName"/>
      <el-table-column label="邀请员工" prop="realname" key="realname"/>
      <el-table-column label="团人数" key="personnelNumber">
        <template slot-scope="scope">
          {{ scope.row.personnelNumber }}(虚拟{{ scope.row.virtualPersonnelNumber }}人)
        </template>
      </el-table-column>
      <el-table-column label="团状态" key="groupPurchaseStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.team_status" :value="scope.row.groupPurchaseStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="微信信息" key="wxinfo" width="300">
        <template slot-scope="scope">
          <div v-for="(item,index) of scope.row.itemList">
            <div class="info-box table-gap" :key="index">
              <div class="img-box">
                <img :src="item.avatarUrl" alt=""/>
              </div>
              <div class="content-box">
                <div>
                  {{ item.nickname }}
                </div>
                <div>
                  ID:{{ idDesensit(item.wxId) }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="报名信息" key="registerInfo" width="150">
        <template slot-scope="scope">
          <div v-for="(item,index) of scope.row.itemList">
            <div class="table-gap" :key="index">
              <div>{{ item.registerName }}</div>
              <div>{{ item.registerMobile }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="团内身份" key="identity" width="100">
        <template slot-scope="scope">
          <div v-for="(item,index) of scope.row.itemList">
            <div class="table-gap" :key="index">
              <dict-tag :options="dict.type.team_identity" :value="item.identity"/>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="参团时间" key="createTime" width="170">
        <template slot-scope="scope" >
          <div v-for="(item,index) of scope.row.itemList">
            <div class="table-gap" :key="index">
              {{ parseTime(item.createTime) }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column key="操作" label="操作" class-name="small-padding fixed-width" fixed="right" min-width="220">
        <template slot-scope="scope" >
          <div v-for="(item,index) of scope.row.itemList">
            <div class="table-gap" :key="index">
              <el-button type="text" v-if="item.identity == 1" @click="goVirtual(item)">调整虚拟成员</el-button>
              <el-button type="text" v-if="item.identity == 1" @click="goReduce(item)">降为团员</el-button>
              <el-button type="text" v-if="item.identity == 2" @click="goUpgrade(item)">升为团长</el-button>
              <el-button type="text" @click="goIsolate(item)">独立成团</el-button>
              <el-button type="text" @click="goRemoveTeam(item)">移团</el-button>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0 && !showWay"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getActivityOrderList"
    />
    <pagination
      v-show="total>0 && showWay"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getActivityOrderGroupPurchaseList"
    />

    <el-dialog title="请选择移至的团" :visible.sync="removeTeamOpen" width="700px" append-to-body>
      <el-input
        style="width: 100%"
        v-model="removeTeamParams.keyword"
        placeholder="请输入要搜索的团长昵称、姓名或手机号"
        clearable
        @keyup.enter.native="handleQueryTeamList">
        <el-button circle slot="append" icon="el-icon-search" @click="handleQueryTeamList"></el-button>
      </el-input>
      <el-table
        :data="removeTeamList"
        style="width: 100%"
        ref="radioTable"
        :header-cell-style="{background:'#eef1f6',color:'#909399'}"
        fixed
        @row-click="rowClick"
        @selection-change="selectionChange"
        stripe>
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="团长" key="nickname">
          <template slot-scope="scope">
            <div class="info-box">
              <div class="img-box">
                <img :src="scope.row.avatarUrl" alt=""/>
              </div>
              <div class="content-box">
                <div>
                  {{ scope.row.nickname }}
                </div>
                <div>
                  <span>{{ scope.row.registerName }}</span>
                  <span>{{ scope.row.registerMobile }}</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column property="personnelNumber" key="personnelNumber" label="团人数"/>
      </el-table>
      <pagination
        v-show="removeTeamTotal>0"
        :total="removeTeamTotal"
        :page.sync="removeTeamParams.pageNum"
        :limit.sync="removeTeamParams.pageSize"
        @pagination="getQueryTeamList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitRemoveToTeam">确认</el-button>
        <el-button size="mini" @click="removeTeamOpen = false">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改报名信息" :visible.sync="updateEnrollOpen" width="500px" :inlist="true" append-to-body>
      <el-form ref="enrollForm" :model="enrollForm" :rules="enrollRules" label-width="100px">
        <el-form-item :label="collectRule[0].label" :rules="enrollRules[0]" prop="enrollName">
          <el-input v-model="enrollForm.enrollName" :placeholder="'请输入' + collectRule[0].label" />
        </el-form-item>
        <el-form-item :label="collectRule[1].label" :rules="enrollRules[1]" prop="enrollMobile">
          <el-input v-model="enrollForm.enrollMobile" :placeholder="'请输入' + collectRule[1].label" />
        </el-form-item>
        <template v-for="(item, index) in collectRule">
          <!--输入框-->
          <el-form-item v-if="item.type === 'input' && index > 1" :label="item.label" :key="index" :rules="enrollRules[index]">
            <el-input v-model="enrollForm.enrollOther[index]" :placeholder="'请输入' + item.label"/>
          </el-form-item>
          <!--单选-->
          <el-form-item v-if="item.type === 'radio' && index > 1" :label="item.label" :key="index" :rules="enrollRules[index]">
            <el-select style="width: 100%" :placeholder="'请选择' + item.label" clearable v-model="enrollForm.enrollOther[index]">
              <el-option
                v-for="item in item.options"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <!--多选-->
          <el-form-item v-if="item.type === 'select' && index > 1" :label="item.label" :key="index" :rules="enrollRules[index]">
            <el-select style="width: 100%" :placeholder="'请选择' + item.label" clearable multiple v-model="enrollForm.enrollOther[index]">
              <el-option
                v-for="item in item.options"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </template>
        <el-form-item v-if="isOptionalIdentity" label="客户身份">
          <el-radio-group v-model="enrollForm.optionalIdentity">
            <el-radio label="new_member">新生（可开团/参团）</el-radio>
            <el-radio label="old_member">老客（仅可开团）</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="submitEnrollForm">确 定</el-button>
        <el-button size="mini" @click="cancelEditEnroll">取 消</el-button>
      </div>
    </el-dialog>

    <!--推广-->
    <el-dialog title="推广" :visible.sync="activityShareOpen" width="600px" :inlist="true" @close="closeActivityShare">
      <div class="activity-share-base" v-loading="loading" element-loading-text="拼命加载中">
        <div class="activity-share-poster">
          <img :src="templatePosterImg" alt="">
        </div>
        <div class="activity-share-text">
          <div class="activity-share-url">
            <div class="activity-share-url-title">
              活动链接：
            </div>
            <div class="activity-share-url-content">
              <el-input
                size="small"
                v-model="shareUrlLink" disabled>
                <el-button type="primary" slot="append" @click="copyText">复制</el-button>
              </el-input>
            </div>
          </div>
          <div class="activity-share-qr-img">
            <img v-if="qrCode === 'general'" :src="activityQrImg"/>
            <img v-if="qrCode === 'official'" src="../../../../assets/images/activity/mini_qr.jpg" width="150" height="150"/>
          </div>
          <div class="activity-share-qr-but">
            <el-button v-if="qrCode === 'general'" type="primary" size="mini" @click="qrCode = 'official'">切换为小程序码</el-button>
            <el-button v-if="qrCode === 'official'" type="primary" size="mini" @click="qrCode = 'general'">切换为二维码</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!--自定义列表信息-->
    <el-dialog title="自定义列表信息" :visible.sync="customRowOpen" width="600px">
      <div class="custom-box">
        <div class="custom-box-item" v-for="(item, index) in columnsCopy" :key="index">
            <span>
              <input v-model="columnsCopy[index].visible" type="checkbox" :value="item.key"/>
              <label>{{ item.label }}</label>
            </span>
        </div>
      </div>
      <div>
        <el-button size="mini" @click="customRowOpen = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="customRowConfirm">确 认</el-button>
      </div>
    </el-dialog>

    <el-dialog title="调整虚拟团员" :visible.sync="virtualOpen" width="400px">
      <div style="padding-bottom: 20px">
        将团内虚拟人员调整为<el-input size="small" style="width: 30%; padding: 0 10px" type="number" v-model="virtual.virtualPersonnelNumber" min="0"/>人
      </div>
      <div>
        <el-button size="small" @click="virtualOpen = false">取 消</el-button>
        <el-button type="primary" size="small" @click="confirmVirtual">确 认</el-button>
      </div>
    </el-dialog>

    <el-dialog title="批量调整虚拟团员" :visible.sync="confirmAdjustOpen" width="400px">
      <div style="padding-bottom: 20px">
        将团内虚拟人员调整为<el-input size="small" style="width: 30%; padding: 0 10px" type="number" v-model="confirmAdjustForm.virtualPersonnelNumber" min="0"/>人
      </div>
      <div>
        <el-button size="small" @click="cancelBatchConfirmVirtual">取 消</el-button>
        <el-button type="primary" size="small" @click="batchConfirmVirtual">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  activityOrderList,
  activityOrderGroupPurchaseList,
  activityDetailById,
  queryCanMoveTeamList,
  memberPublicizeUrl,
  memberPosterImg,
  orderList,
  teamSta
} from "@/api/triones/activity";
import {
  upgrade,
  reduce,
  isolate,
  batchRefund,
  moveToTeam,
  editEnroll,
  confirmVirtual,
  batchConfirmVirtual
} from "@/api/triones/order";
import AraleQRCode from "arale-qrcode";
import {Loading, Message} from "element-ui";
import store from "@/store";
export default {
  name: "EnrollInfoList",
  dicts: ['team_identity', 'team_status', 'order_type'],
  props: {
    value: {
      type: Number,String
    }
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        activityId: undefined,
        wxKeyword: undefined,
        enrollKeyword: undefined,
        goodsName: undefined,
        identity: undefined,
        optionalIdentity: undefined,
        attendDateRange: [],
        groupStatus: undefined,
        status: undefined,
        settlementStatus: undefined,
        enrollDateRange: [],
        awardMemberKey: undefined,
        enrollOther: [],
        teamNumber: undefined
      },
      dataList: [],
      total: 0,
      showWay: false,
      activityDetail: {},
      collectRule: [],
      isOptionalIdentity: false,
      removeTeamOpen: false,
      removeTeamParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: undefined,
        activityId: undefined,
        groupPurchaseId: undefined,
        orderId: undefined
      },
      removeTeamList: [],
      removeTeamTotal: 0,
      selectData :{},
      ids: [],
      single: true,
      multiple: true,
      updateEnrollOpen: false,
      enrollForm: {
        id: null,
        enrollName: null,
        enrollMobile: null,
        enrollOther: {},
        optionalIdentity: ''
      },
      enrollRules: {},
      activityShareOpen: false,
      loading: true,
      templatePosterImg: '',
      shareUrlLink: '',
      // general：普通二维码、official：官方
      qrCode: 'general',
      activityQrImg: '',
      columns: [
        { key: 0, label: `微信信息`, visible: true },
        { key: 1, label: `报名信息`, visible: true },
        { key: 2, label: `自定义信息收集项`, visible: true },
        { key: 3, label: `邀请人`, visible: true },
        { key: 4, label: `邀请员工`, visible: true },
        { key: 5, label: `团内身份`, visible: true },
        { key: 6, label: `团人数`, visible: true },
        { key: 7, label: `所属团`, visible: true },
        { key: 8, label: `客户身份`, visible: true },
        { key: 9, label: `报名商品`, visible: true },
        { key: 10, label: `支付金额（元）`, visible: true },
        { key: 11, label: `实收金额（元）`, visible: true },
        { key: 12, label: `报名时间`, visible: true },
        { key: 13, label: `团状态`, visible: true },
        { key: 14, label: `订单状态`, visible: true },
        { key: 15, label: `报名费用`, visible: true },
      ],
      columnsCopy: [],
      customRowOpen: false,
      teamStaData: [],
      virtualOpen: false,
      virtual: {
        orderId: undefined,
        id: undefined,
        virtualPersonnelNumber: 1
      },
      batchVirtualOpen: false,
      confirmAdjustOpen: false,
      confirmAdjustForm: {
        ids: [],
        virtualPersonnelNumber: 0,
        createPersonnelNumber: 0,
      }
    }
  },
  watch: {
    showWay: {
      async handler(val) {
        this.handleQuery();
      }
    }
  },
  created() {
    this.getActivityById();
    this.getActivityOrderList();
  },
  methods: {
    formatOrderStatus(status) {
      let hms = '';
      switch (Number(status)) {
        case 1:
          hms = '未付款';
          break;
        case 2:
          hms = '待核销';
          break;
        case 3:
          hms = '退款中';
          break;
        case 4:
          hms = '订单关闭';
          break;
        case 5:
          hms = '订单完成';
          break;
        default:
          break;
      }
      return hms;
    },
    formatTeamStatus(status) {
      let hms = '';
      switch (Number(status)) {
        case 1:
          hms = '待成团';
          break;
        case 2:
          hms = '已成团';
          break;
        case 3:
          hms = '已满团';
          break;
        case -1:
          hms = '已作废';
          break;
        default:
          break;
      }
      return hms;
    },
    /** 获取活动详情 */
    getActivityById() {
      activityDetailById(this.value).then(response => {
        this.activityDetail = response.data;
        if (response.data) {
          const content = JSON.parse(response.data.content);
          if (content) {
            this.collectRule = content.enroll_info_collect.collect_rule;
            if (content.pintuan_goods_config.custom.is_optional_identity) {
              this.isOptionalIdentity = content.pintuan_goods_config.custom.is_optional_identity;
            }
          }
        }
      });
    },
    /** 获取活动订单列表 */
    getActivityOrderList() {
      this.queryParams.activityId = this.value;
      activityOrderList(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        for (const dataItem of this.dataList) {
          if (dataItem.enrollOther) {
            dataItem.enrollOther = JSON.parse(dataItem.enrollOther);
          }
        }
      })
    },
    setPersonnelNumberCount(count) {
      this.queryParams.teamNumber = count;
      this.getActivityOrderGroupPurchaseList();
    },
    /** 获取当前活动拼团人数统计 */
    getTeamSta() {
      teamSta(this.value).then(response => {
        this.teamStaData = response.data;
      })
    },
    /** 获取活动拼团列表 */
    getActivityOrderGroupPurchaseList() {
      this.queryParams.activityId = this.value;
      activityOrderGroupPurchaseList(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
      })
    },
    /** 检索 */
    handleQuery() {
      this.dataList = [];
      this.total = 0;
      this.queryParams.pageNum = 1;
      this.queryParams.teamNumber = undefined;
      if (!this.showWay) {
        this.getActivityOrderList();
      } else {
        this.getActivityOrderGroupPurchaseList();
        this.getTeamSta();
      }
    },
    /** 重置 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        activityId: undefined,
        wxKeyword: undefined,
        enrollKeyword: undefined,
        goodsName: undefined,
        identity: undefined,
        optionalIdentity: undefined,
        attendDateRange: [],
        groupStatus: undefined,
        status: undefined,
        settlementStatus: undefined,
        enrollDateRange: [],
        awardMemberKey: undefined,
        enrollOther: [],
        teamNumber: undefined
      }
      this.queryParams.attendDateRange = [];
      this.queryParams.enrollDateRange = [];
      this.queryParams.enrollOther = [];
      this.handleQuery()
    },
    handleCommand(command, row) {
      switch (command) {
        case "memberSource":
          break;
        case "editEnroll":
          this.goUpdateEnroll(row);
          break;
        case "upgrade":
          this.goUpgrade(row);
          break;
        case "reduce":
          this.goReduce(row);
          break;
        case "isolate":
          this.goIsolate(row);
          break;
        case "remove":
          this.goRemoveTeam(row);
          break;
        case "refund":
          this.goToOrderInfo(row);
          break;
        case "publicize":
          this.goPublicize(row);
          break;
        default:
          break;
      }
    },
    /** 升为团长 */
    goUpgrade(row) {
      let id = row.id;
      if (this.showWay) {
        id = row.orderId;
      }
      this.$modal.confirm('是否确定升为团长').then(() => {
        return upgrade(id);
      }).then(() => {
        this.getActivityOrderList();
        this.$modal.msgSuccess("操作成功");
      })
    },
    /** 调整虚拟成员 */
    goVirtual(row) {
      this.virtual = {
        orderId: undefined,
        id: undefined,
        virtualPersonnelNumber: 1
      }
      this.virtual.orderId = row.id;
      if (this.showWay) {
        this.virtual.orderId = row.orderId;
      }
      this.virtual.id = row.groupPurchaseId;
      this.virtualOpen = true;
    },
    /** 降为团员 */
    goReduce(row) {
      let id = row.id;
      if (this.showWay) {
        id = row.orderId;
      }
      this.$modal.confirm('是否确定降为团员').then(() => {
        return reduce(id);
      }).then(() => {
        this.getActivityOrderList();
        this.$modal.msgSuccess("操作成功");
      })
    },
    /** 独立成团 */
    goIsolate(row) {
      let id = row.id;
      if (this.showWay) {
        id = row.orderId;
      }
      this.$modal.confirm('是否独立成团？确定后此用户将从该团移出，并创建团').then(() => {
        return isolate(id);
      }).then(() => {
        this.getActivityOrderList();
        this.$modal.msgSuccess("操作成功");
      })
    },
    /** 去选择移动的团列表 */
    goRemoveTeam(row) {
      this.removeTeamParams.groupPurchaseId = row.groupPurchaseId;
      this.removeTeamParams.activityId = row.activityId;
      this.removeTeamParams.orderId = row.id;
      if (this.showWay) {
        this.removeTeamParams.orderId = row.orderId;
      }
      this.getQueryTeamList();
      this.removeTeamOpen = true;
    },
    /** 跳转到订单详情 */
    goToOrderInfo(row) {
      this.$router.push("/order/detail/index/" + row.id);
    },
    /** 检索可移动团列表 */
    handleQueryTeamList() {
      this.removeTeamParams.pageNum = 1;
      this.getQueryTeamList();
    },
    /** 获取可移动团列表 */
    getQueryTeamList() {
      queryCanMoveTeamList(this.removeTeamParams).then(response => {
        this.removeTeamList = response.rows;
        this.removeTeamTotal = response.total;
      })
    },
    /** 提交移动团 */
    submitRemoveToTeam() {
      moveToTeam(this.selectData.id,this.removeTeamParams.orderId).then(response => {
        this.selectData = {};
        this.removeTeamOpen = false;
        this.getActivityOrderList();
        this.$message.success("操作成功");
      })
    },
    rowClick(row, column) {
      this.$refs.radioTable.toggleRowSelection(row);
    },
    selectionChange(val) {
      if(val.length>1){
        this.$refs.radioTable.clearSelection()
        this.$refs.radioTable.toggleRowSelection(val.pop())
      }else{
        this.selectData = val.pop()
      }
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 批量退款 */
    batchRefund() {
      const ids = this.ids;
      if (ids.length <= 0) {
        return this.$message.error("请选择要退款的订单");
      }
      this.$modal.confirm('是否确认批量退款？').then(function() {
        return batchRefund(ids);
      }).then(() => {
        this.getActivityOrderList();
        this.$modal.msgSuccess("操作成功");
      }).catch(() => {});
    },
    /** 去修改报名信息 */
    goUpdateEnroll(row) {
      let newRow = JSON.parse(JSON.stringify(row))
      //获取最新活动信息
      this.getActivityById();
      this.enrollForm.enrollName = newRow.enrollName;
      this.enrollForm.enrollMobile = newRow.enrollMobile;
      this.enrollForm.enrollOther = newRow.enrollOther;
      this.enrollForm.id = newRow.id;
      this.enrollForm.optionalIdentity = newRow.optionalIdentity;
      if (this.collectRule && this.collectRule.length > 0) {
        for (let i in this.collectRule) {
          //添加动态校验
          var rulesItemarr = [];
          const rulesItem = {};
          rulesItem['required'] = this.collectRule[i].require;
          if (this.collectRule[i].type === 'input') {
            rulesItem['message'] = '请输入' + this.collectRule[i].label;
          } else {
            rulesItem['message'] = '请选择' + this.collectRule[i].label;
          }
          rulesItem['trigger'] = 'blur';
          rulesItemarr.push(rulesItem);
          console.log('i',i)
          this.enrollRules[i] = rulesItemarr;

          if (this.collectRule[i].type === 'select' && this.enrollForm.enrollOther[i]) {
            if (this.enrollForm.enrollOther[i].indexOf(',') !== -1) {
              this.enrollForm.enrollOther[i] = this.enrollForm.enrollOther[i].split(",");
            } else {
              var arr = [];
              arr.push(this.enrollForm.enrollOther[i]);
              this.enrollForm.enrollOther[i] = arr;
            }
          }
        }
      }
      this.updateEnrollOpen = true;
    },
    /** 提交报名信息修改 */
    submitEnrollForm() {
      if (this.collectRule && this.collectRule.length > 0) {
        for (let i in this.collectRule) {
          if (this.collectRule[i].type === 'select') {
            this.enrollForm.enrollOther[i] = this.enrollForm.enrollOther[i].join(",")
          }
        }
      }
      const data = {
        id: this.enrollForm.id,
        enrollName: this.enrollForm.enrollName,
        enrollMobile: this.enrollForm.enrollMobile,
        enrollOther: JSON.stringify(this.enrollForm.enrollOther),
        optionalIdentity: this.enrollForm.optionalIdentity
      }
      this.$refs["enrollForm"].validate(valid => {
        if (valid) {
          editEnroll(data).then(response => {
            this.updateEnrollOpen = false;
            this.enrollForm = {
              id: null,
              enrollName: null,
              enrollMobile: null,
              enrollOther: {},
              optionalIdentity: ''
            }
            this.getActivityOrderList();
          })
        }
      })
    },
    /** 取消修改 */
    cancelEditEnroll() {
      this.enrollForm = {
        id: null,
        enrollName: null,
        enrollMobile: null,
        enrollOther: {}
      }
      this.updateEnrollOpen = false;
    },
    /** 推广 */
    goPublicize(row) {
      this.templatePosterImg = '';
      this.activityQrImg = '';
      this.getMemberPublicizeUrl(row.memberId,row.activityId);
      this.getMemberPosterImg(row.memberId,row.activityId);
      this.activityShareOpen = true;
    },
    closeActivityShare() {
      this.activityShareOpen = false;
      this.qrCode = 'general';
      this.activityQrImg = '';
      this.activityItem = null;
      this.loading = true;
    },
    /** 复制 */
    copyText() {
    // 创建一个临时的 textarea 元素。
      const el = document.createElement('textarea');
      el.value = this.shareUrlLink;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      this.$message.success('复制成功');
    },
    /** 获取客户推广短链接 */
    getMemberPublicizeUrl(memberId,activityId) {
      memberPublicizeUrl(memberId,activityId).then(response => {
        this.shareUrlLink = response.data.urlLink;
        if (response.data.urlLink) {
          this.makeCode(response.data.urlLink);
          this.loading = false;
        }
      })
    },
    /** 获取客户海报 */
    getMemberPosterImg(memberId,activityId) {
      this.loading = true;
      memberPosterImg(memberId,activityId).then(response => {
        this.templatePosterImg = response.data.imgUrl;
        this.loading = false;
      })
    },
    /** 生成二维码 */
    makeCode(text) {
      const result = new AraleQRCode({
        render: "svg",
        text: text,
        size: 150,
      });
      const svgXml = new XMLSerializer().serializeToString(result);
      const src =
        "data:image/svg+xml;base64," +
        window.btoa(unescape(encodeURIComponent(svgXml)));
      // 本地存储图片
      localStorage.setItem("image", src);
      this.getQrCodeImg();
    },
    /** 获取存储的图片给到页面 */
    getQrCodeImg() {
      this.activityQrImg = localStorage.getItem("image");
      localStorage.removeItem("image");
    },
    /** 自定义列表信息 */
    customRow() {
      this.columnsCopy = JSON.parse(JSON.stringify(this.columns))
      this.customRowOpen = true;
    },
    /** 确认自定义列表信息 */
    customRowConfirm() {
      for (let item in this.columnsCopy) {
        this.columns[item].visible = this.columnsCopy[item].visible;
      }
      this.customRowOpen = false;
    },
    /** 调整虚拟成员 */
    confirmVirtual() {
      confirmVirtual(this.virtual.orderId,this.virtual).then(response =>{
        this.virtual = {
          orderId: undefined,
          id: undefined,
          virtualPersonnelNumber: 1
        }
        this.handleQuery()
        this.$message.success("操作成功");
        this.virtualOpen = false;
      })
    },
    /** 导出 */
    handleExport() {
      this.loading = true;
      //调取接口获取数据
      this.queryParams.activityId = this.value;
      orderList(this.queryParams).then(response => {
        if (response.data) {
          let sheetValuesList = [];
          for (const dataItem of response.data) {
            if (dataItem.enrollOther) {
              dataItem.enrollOther = JSON.parse(dataItem.enrollOther);
            }
            dataItem.status = this.formatOrderStatus(dataItem.status);
            dataItem.groupPurchaseStatus = this.formatTeamStatus(dataItem.groupPurchaseStatus);
            const sheetValuesListItem = {};
            for (let key in dataItem) {
              if (key === 'nickname') {
                sheetValuesListItem['微信信息'] = dataItem[key];
              }
              if (key === 'enrollName') {
                sheetValuesListItem['报名姓名'] = dataItem[key];
              }
              if (key === 'enrollMobile') {
                sheetValuesListItem['手机号'] = dataItem[key];
              }
              if (key === 'inviteNickname') {
                sheetValuesListItem['邀请人'] = dataItem[key];
              }
              if (key === 'realname') {
                sheetValuesListItem['邀请员工'] = dataItem[key];
              }
              if (key === 'identity') {
                sheetValuesListItem['团内身份'] = dataItem[key] == 1 ? '团长':'团员';
              }
              if (key === 'personnelNumber') {
                sheetValuesListItem['团人数'] = dataItem[key];
              }
              if (key === 'teamName') {
                sheetValuesListItem['所属团'] = dataItem[key];
              }
              if (key === 'optionalIdentity') {
                sheetValuesListItem['客户身份'] = dataItem[key] === 'old_member' ? '老客':'新客';
              }
              if (key === 'welfareName') {
                sheetValuesListItem['报名商品'] = dataItem[key];
              }
              if (key === 'realityPayAmount') {
                sheetValuesListItem['支付金额（元）'] = dataItem[key];
              }
              if (key === 'actualAmount') {
                sheetValuesListItem['实收金额（元）'] = dataItem[key];
              }
              if (key === 'createTime') {
                sheetValuesListItem['报名时间'] = dataItem[key];
              }
              if (key === 'groupPurchaseStatus') {
                sheetValuesListItem['团状态'] = dataItem[key];
              }
              if (key === 'status') {
                sheetValuesListItem['订单状态'] = dataItem[key];
              }
              if (key === 'settlementStatus') {
                sheetValuesListItem['报名费用'] = dataItem[key] == 2 ? '已结算' : '待结算';
              }
            }
            for (const index in this.collectRule) {
              if (index > 1) {
                sheetValuesListItem[this.collectRule[index].label] = dataItem.enrollOther[index];
              }
            }
            sheetValuesList.push(sheetValuesListItem);
          }
          console.log('sheetValuesList',sheetValuesList)
          const json = {
            sheet_name: '打分列表',
            sheet_values: sheetValuesList
          }
          this.mixinExportJosnToExcel(json, '活动订单数据')
        }
      })
      this.loading = false;
    },
    /** 确认调整 */
    confirmAdjust() {
      this.confirmAdjustOpen = true;
    },
    /** 单选、取消单选 */
    handleSelection(selectes, row) {
      console.log('单选、取消单选 selectes',selectes)
      console.log('单选、取消单选 row',row)
      if (this.confirmAdjustForm.createPersonnelNumber === 0) {
        this.confirmAdjustForm.createPersonnelNumber = row.personnelNumber - row.virtualPersonnelNumber;
        if (!this.confirmAdjustForm.ids.includes(row.id)) {
          this.confirmAdjustForm.ids.push(row.id);
        } else {
          this.confirmAdjustForm.ids.forEach((id, index) => {
            if (id === row.id) {
              this.confirmAdjustForm.ids.splice(index, 1);
            }
          });
        }
      } else {
        if ((row.personnelNumber - row.virtualPersonnelNumber) !== this.confirmAdjustForm.createPersonnelNumber) {
          this.$refs.multipleTable.toggleRowSelection(row,false);
          return this.$message.error("请勾选具有相同实际人数的团");
        }
        if (!this.confirmAdjustForm.ids.includes(row.id)) {
          this.confirmAdjustForm.ids.push(row.id);
        } else {
          this.confirmAdjustForm.ids.forEach((id, index) => {
            if (id === row.id) {
              this.confirmAdjustForm.ids.splice(index, 1);
            }
          });
        }
      }
      if (this.confirmAdjustForm.ids.length === 0) {
        this.confirmAdjustForm.createPersonnelNumber = 0;
      }
    },
    /** 全选、取消全选 */
    handleAllChange(rows) {
      if (rows.length > 0) {
        rows.forEach(item => {
          if (!this.confirmAdjustForm.ids.includes(item.id)) {
            this.confirmAdjustForm.ids.push(item.id);
          }
        });
      } else {
        this.dataList.forEach(item => {
          this.confirmAdjustForm.ids.forEach((id, index) => {
            if (id === item.id) {
              this.confirmAdjustForm.ids.splice(index, 1);
            }
          });
        });
      }
    },
    getRowKeys(row) {
      return row.id;
    },
    /** 取消批量调整 */
    cancelBatchVirtual() {
      console.log('取消批量调整')
      this.$refs.multipleTable.clearSelection();
      this.confirmAdjustForm = {
        ids: [],
        virtualPersonnelNumber: 0,
        createPersonnelNumber: 0
      }
      this.confirmAdjustOpen = false;
      this.batchVirtualOpen = false;
    },
    /** 切换按团显示信息 */
    switchShowWay(value) {
      if (!value) {
        this.$refs.multipleTable.clearSelection();
        this.confirmAdjustForm.ids = [];
        this.batchVirtualOpen = false;
      }
    },
    /** 提交批量调整虚拟人数 */
    batchConfirmVirtual() {
      let downloadLoadingInstance = Loading.service({ text: "处理中，请稍等...", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
      batchConfirmVirtual(this.confirmAdjustForm).then(response =>{
        this.confirmAdjustForm = {
          ids: [],
          virtualPersonnelNumber: 0,
          createPersonnelNumber: 0
        }
        this.cancelBatchVirtual();
        this.handleQuery();
        this.$message.success("操作成功");
        downloadLoadingInstance.close();
      }).catch(error => {
        downloadLoadingInstance.close();
      })
    },
    cancelBatchConfirmVirtual() {
      this.confirmAdjustOpen = false;
      this.confirmAdjustForm.virtualPersonnelNumber = 0;
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep.el-table {
  .el-table__header-wrapper {
    .el-table-column--selection {
      .el-checkbox {
        display: none;
      }
    }
  }

  .el-table__fixed {
    .el-table__fixed-header-wrapper {
      .el-table-column--selection {
        .el-checkbox {
          display: none;
        }
      }
    }
  }
}


::v-deep .el-table-column--selection .cell{
  text-align: center;
}
::v-deep .el-checkbox__input .el-checkbox__inner{
  border-radius: 50%;
}

.enroll-info-container {
  margin: 0;
  padding: 0px 0px 10px;
  box-sizing: border-box;
}

.show-base {
  display: flex;
  .show-way {
    margin-left: 10px;
    width: 170px;
    height: 50px;
    text-align: center;
    align-content: center;
    border: 1px solid blue;
    border-radius: 10px;
    .show-way-title {
      font-size: 14px;
      vertical-align: middle;
    }
  }

  .team-sta {
    padding-left: 15px;
    width: 70px;
    height: 50px;
    text-align: center;
    align-content: center;
    margin-left: 10px;
  }

  .refund-btn {
    align-content: center;
    position: absolute;
    right: 20px;
  }
}

.showWayBg {
  background-color: #ddedfc;
}

.table-gap {
  height: 50px;
  width: auto;
  margin: 15px 0px;
  align-content: center;
}

.activity-share-base {
  display: flex;
  align-content: center;
  .activity-share-poster {
    width: 180px;
    height: 300px;
    background-color: #00afff;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .activity-share-text {
    padding-left: 20px;
    width: calc(100% - 180px);
    height: auto;
    .activity-share-url {
      display: flex;
      align-content: center;
      .activity-share-url-title {
        width: 70px;
        align-content: center;
      }
      .activity-share-url-content {
        width: calc(100% - 70px);
      }
    }
    .activity-share-qr-img {
      padding-top: 20px;
      text-align: center;
    }
    .activity-share-qr-but {
      padding-top: 10px;
      text-align: center;
    }
  }
}

.form-align-label-box {
  display: flex;
  justify-content: flex-start;
  align-items: start;
  flex-wrap: wrap;
  .form-align-label-item {
    width: 25%;
  }
}

.custom-box {
  height: auto;
  width: 600px;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  .custom-box-item {
    width: 25%;
    height: 30px;
  }
}
</style>
